<!DOCTYPE html>
<html lang="zh_cn" xmlns:th="http://www.thymeleaf.org">

<head>
  <title>Fcidd | 在线工具</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/bootstrap/bootstrap.css">
  <link rel="stylesheet" href="./css/bootstrap/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/common/common.css">
  <link rel="stylesheet" href="./css/tools.css">
</head>

<body class="bg">
<!-- 导航条开始 -->
<div>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container container-fluid">
      <a class="navbar-brand" href="./">Fcidd</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="./">主页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#">在线工具</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="devTools">开发工具</a>
          </li>
        </ul>
        <form class="d-flex">
          <button class="btn btn-outline-light" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom"
                  title="正在开发中">登录
          </button>
        </form>
      </div>
    </div>
  </nav>
</div>
<!-- 导航条结束 -->
<!--正文开始-->
<div class="container">
  <div class="card" id="base64">
    <div class="card-header">
      Base64加解密
    </div>
    <div class="card-body">
      <div v-if="base64HasError" class="alert alert-danger d-flex align-items-center" role="alert">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
             class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img"
             aria-label="Warning:">
          <path
            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"></path>
        </svg>
        <div v-text="base64Error"></div>
      </div>
      <form class="input-group mb-3" v-on:submit.prevent="base64Encryption">
        <input type="text" class="form-control" placeholder="请输入要加密文本" name="text" v-model="text">
        <button class="btn btn btn-outline-primary" type="submit" id="encryption">加密</button>
      </form>
      <form class="input-group mb-3" v-on:submit.prevent="base64Decryption">
        <input type="text" class="form-control" placeholder="请输入需要解密的Base64编码" name="base64" v-model="base64">
        <button class="btn btn btn-outline-primary" type="submit" id="decryption">解密</button>
      </form>
    </div>
  </div>
</div>
<!--正文结束-->
<!-- 底部信息开始 -->
<footer class="footer">
  <h5 class="container"><img src="./img/beian.png"><a target="_blank"
                                                      href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34010202601685">皖公网安备
    34010202601685号</a> ICP证：<a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备20011737号-1</a></h5>
</footer>
<!-- 底部信息结束 -->

<script src="./js/bootstap/popper.js"></script>
<script src="./js/bootstap/bootstrap.js"></script>
<script src="./js/jquery/jquery.js"></script>
<script src="./js/tools/enableTips.js"></script>
<script src="./js/vue/vue.js"></script>
<script src="./js/tool/tools.js"></script>
</body>

</html>